<template>
	<view style="background: #f5f5f9;">
		<view class="c-box" id="collect">
		    <view class="my">
		        <view class="mt">
		           <person-header :currentUser="currentUser"></person-header>
		        </view>
		    </view>
		    <view class="anchorHomepage connaught-style" >
		
		        <!--tab切换-->
		        <view class="tabs">
		            <view class=" item" :class="[index==1?'active':'']" @click="tabsClick(1)">产品<strong></strong><view class="span"></view>
		            </view>
		            <view class=" item" :class="[index==2?'active':'']" @click="tabsClick(2)">需求<strong></strong><view class="span"></view>
		            </view>
		            <view class=" item" :class="[index==3?'active':'']" @click="tabsClick(3)">小视频<strong></strong><view class="span"></view>
		            </view>
		        </view>
		        <!--产品-->
		        <view class="collect" v-if="index==1">
		            <view class="ul">
		                <view class="li" v-for="(item,index) in productList" :key="index">
		                    <view @click="goProduct(item.id)">
		                        <view class="image"><image :src="item.banarImgList[0]"/></view>
		                        <view class="tit">
		                            <view class="mt">
		                                <view class="nowrap h2" >{{item.tradeName}}</view>
		                            </view>
		                            <view class="mb">
		                                <view class="num" style="font-weight: bold;display: flex; align-items:center;" >¥<view class="price">{{item.price?item.price:'询价'}}</view></view>
		                                <view class="a" @tap.stop="cancelFollow(item.collectionId)">
											<image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon59.png"/></view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <!--需求-->
		        <view class="demandList" style="margin-top:28rpx" v-else-if="index==2">
		            <view class="ul">
		                <view class="li" v-for="demand in demandList">
		                    <view class="a" @click="toDemandMain(demand.id)">
		                        <view class="mt">
		                            <image v-show="demand.ifAttestation  == 1" class="attestation" src="https://m.nocexpo.com/statics/js/modules/h5/img/attestation.png"/>
		                            <view class="hot" v-show="demand.ifRecommend == 1">Hot</view><!--<span>采购</span>-->
		                            <view class="nowrap">寻求:{{demand.title}}</view>
		                            <view class="em"></view>
		                        </view>
		                        <view class="mc mb">
		                            <!--<span>{{demand.productModel}}</span>
		                            <span>其他所需</span>-->
		                            <view class="tag-item" v-for="(item,index) in demand.tagList" v-if="index<3">
		                                <view @click="goTagNews(item)" class="tag-item-text">
		                                    {{'#'+item.tagName}}
		                                </view>
		                            </view>
		                            <view class="em">详情</view>
		                        </view>
		                        <view class="mb">
		                            <view class="span">{{demand.browseCount}}浏览 · {{demand.colCount}}收藏</view>
		                            <view class="em">{{demand.createAt}}</view>
									
		                            <view style="float: right;width: 25rpx;margin-right: 14rpx ;" href="javascript:void(0)" @click.stop="cancelFollow(demand.collectionId)">
										<image style="width: 25rpx;height: 36rpx;" src="/static/image/icon59.png"/></view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <!--视频-->
		        <view class="sp-module" v-else-if="index==3" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
		            <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
		                <view class="item-image">
		                    <image mode="widthFix" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
		
		                    <view class="date">{{item.videoDuration}}</view>
		                </view>
		                <view class="item-title1">{{item.videoTitle}}</view>
		                <view class="play-comment">
		                    <view class="div"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
		                    <view class="div"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
		                </view>
		            </view>
		        </view>
		
		    </view>
		</view>
	</view>
</template>

<script>
import collectApi from '@/api/collect.js';
import commonApi from '@/utils/commonMethod.js';
import personHeader from "../../components/person/personHeader.vue";

export default {
	components: {
		personHeader
	},
	data() {
		return {
			currentUser: {},
			productList: [],
			demandList: [],
			videoList: [],
			historyCount: '',
			index: 1, //tabs切换
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	async created() {
		//不是页面回退,或者是活动页返回
		// if (window.performance && window.performance.navigation.type != 2) {

		// }else{
		// 	this.index = sessionStorage.getItem("collect_index");
		// }
		// setDocumentTitle("我的收藏")
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		//获取展厅首页浏览量
		//根据type获取收藏数量,1.产品 2.需求
		await this.getList()
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted() {
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的收藏")
					
		},
		goTagNews(item) {
			uni.navigateTo({
				url:'/pages/product/tag/tagNewsList?activeIndex=3&tagId=' + item.id,
				
			})
			// window.location.href = '/h5/tagNewsList.html?activeIndex=3&tagId=' + item.id;
		},
		//根据type获取收藏数量,1.产品 2.需求
		async getList(){
			await collectApi.getCollectionAxios(this.currentUser.id).then(res =>{
				this.attentionCount = res.data.countAndList.totalCount
				this.productList = res.data.countAndList.productList
				this.productList.forEach((value, index, array) => {
					value.banarImgList = value.banarImg.split(',')
				})
				this.demandList = res.data.countAndList.demandList
				this.demandList.forEach((value,index,array) => {
					value.title = value.title.substr(0,20)
				})
				this.videoList = res.data.countAndList.videoList
				this.videoList.forEach((value, index, array) => {
					if (value.videoDuration) {
						value.videoDuration = value.videoDuration.slice(-8)
					}
				})
			})
			
		},
		toVideoMain(id) {
			// sessionStorage.setItem("collect_index", this.index);
			uni.navigateTo({
				url: '/pages/product/vidoDetail/vidoDetail?id='+ id
			})
			// window.location.href = "/h5/video/videoMain.html?id=" + id;
		},
		toDemandMain(id) {
			uni.navigateTo({
				url: '/pages/need/detail/detail?demandId=' + id
			})
			// sessionStorage.setItem("collect_index", this.index);
			// window.location.href = "/h5/demandDetail.html?demandId=" + id;
		},
		//tab选择
		tabsClick(e) {
			console.log("切换table");
			this.index = e;
		},
		//取消收藏
		cancelFollow(collectionId) {
			uni.showModal({
				title: '提示',
				content: '是否取消收藏',
				showCancel:true,
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						collectApi.cancelFollow(collectionId).then((res) => {
							uni.showModal({
								title: '提示',
								content: '取消收藏成功',
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										this.getList()
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						})
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		},
		goProduct(id){
			// sessionStorage.setItem("collect_index", this.index);
			uni.navigateTo({
				url: '/pages/product/productDetail/productDetail?productId=' + id
			})
			// window.location.href = '/h5/productMain.html?productId='+ id;
		},
	},
}
</script>

<style>
.my{
	margin: 0;
	padding: 0;
}
.anchorHomepage{
	margin: 0;
	padding: 0;
}
.c-box {
	width: 100vw;
	margin: 0 auto;
}
.anchorHomepage .tabs .item {
	width: 33.3%;
	position: relative;
	font-size: 15px;
	text-align: center;
}
.anchorHomepage .tabs {
    line-height: 84rpx;
    position: relative;
	display: flex;
}
.connaught-style .tabs .item.active .span {
    background-color: #019d9d;
}
.collect {
    margin-top: 30rpx;
}
.collect .li {
    overflow: hidden;
    margin: 0 28rpx 28rpx 28rpx;
    background: #fff;
    border-radius: 9rpx;
    height: 140rpx;
    padding: 14rpx;
}
.collect .li .image image{
    float: left;
    width: 140rpx;
    height: 140rpx;
}
.collect .li .tit .mt{
	height: 90rpx;
}
.collect .li .tit .mt .h2 {
    font-size: 24rpx;
    color: #333333;
    line-height: 56rpx;
}
.nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collect .li .tit .mb .num {
    float: left;
    font-size: 22rpx;
    color: #fc5260;
}
.collect .li .tit .mb {
    overflow: hidden;
}
.collect .li .tit .mb .num .price {
    font-size: 30rpx;
}
.demandList .li {
    background: #fff;
    border-radius: 9rpx;
    margin-bottom: 30rpx;
    padding: 0 23rpx;
}
.a {
    color: #5c5c5c;
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}
.demandList .li .mt { 
    overflow: hidden;
    display: flex;
    flex: 0 1 auto;
    padding-top: 37rpx;
}
.collect .li .tit {
    float: right;
    width: 500rpx;
}
.attestation {
    width: 84rpx;
    height: 35rpx;
    display: inline-block;
    vertical-align: middle;
    margin: -3rpx 14rpx 0 0;
}

element.style {
    display: none;
}
.demandList .li .mt .hot {
    display: inline-block;
    padding: 0 8rpx;
    height: 20rpx;
    line-height: 20rpx;
    font-size: 13rpx;
    color: #fff;
    background: #fc5260;
    border-radius: 2rpx;
    margin-top: 8rpx;
    vertical-align: top;
    margin-right: 14rpx;
    text-transform: uppercase;
}
.demandList .li .mt .h2 {
    font-size: 30rpx;
    color: #333333;
    line-height: 30rpx;
    width: 100%;
}
.demandList .li .mb {
    font-size: 20rpx;
    color: #c0c1cc;
    padding-bottom: 22.4rpx;
    overflow: hidden;
}

.demandList .li .mc {
    overflow: hidden;
    padding: 37rpx 0;
}
.demandList .li .mb .em {
    float: right;
}
.demandList .li .mc .em {
    float: right;
    height: 47rpx;
    line-height: 47rpx;
    padding: 0 30rpx;
    background: #029e9d;
    border-radius: 6rpx;
    color: #fff;
    font-size: 22rpx;
}
.demandList .li .mb {
    font-size: 20rpx;
    color: #c0c1cc;
    padding-bottom: 22rpx;
    overflow: hidden;
}
.demandList .li .mb .span {
    float: left;
}

.anchorHomepage .tabs .item .span {
    bottom: -3.5rpx;
}
.connaught-style .tabs .item .span {
    position: absolute;
    left: 40%;
    bottom: 0px;
    width: 20%;
    height: 4rpx;
    border-radius: 2rpx;
    background-color: #ffffff;
}
.collect .li .tit .mb .a {
    float: right;
    width: 25rpx;
    margin-right: 14rpx;
}
.collect .li .tit .mb .a image{
    width: 25rpx;
	height: 36rpx;
}
.connaught-style .sp-module {
    padding: 14rpx 14rpx 0;
}
.connaught-style .sp-module .item {
    width: 48.5%;
    background-color: #ffffff;
    border-radius: 11rpx;
    overflow: hidden;
    margin-bottom: 14rpx;
}
.connaught-style .sp-module .item .item-image {
    position: relative;
    /* height: 3rem; */
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #000;
}
.connaught-style .sp-module .item .item-image .date {
    position: absolute;
    width: 90rpx;
    height: 42rpx;
    line-height: 42rpx;
    background-color: rgba(0,0,0,0.5);
    font-size: 10px;
    z-index: 33;
    left: 0;
    top: 0;
    text-align: center;
    color: #ffffff;
    border-radius: 6px 0px 6px 0px;
}
.item-title1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 0 19rpx ;
    /* line-height: 0.93rem; */
    /* height: 0.93rem; */
    color: #191919;
    font-size: 13px;
    -webkit-line-clamp: 2;
    margin-top: 7rpx;
}
.connaught-style .sp-module .item .play-comment {
    justify-content: flex-start;
    padding-bottom: 20rpx;
	display: flex;
}
.connaught-style .sp-module .item .play-comment .div {
    margin-left: 20rpx;
    color: #8f99a7;
    font-size: 11px;
}
.connaught-style .sp-module .item .play-comment .div image{
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8rpx;
    margin-top: -7rpx;
}

.connaught-style .tabs {
    height: 93rpx;
    justify-content: flex-start;
    background-color: #ffffff;
    /* position: fixed; */
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 35;
}
	
.my .mt {
	/* height: 5.733333rem; */
	background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	margin-bottom: 28rpx;
	background-color: #fff;
	height: auto;
}

.collect .h2 {
	padding-top: 23rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 28rpx;
}


.searchContainer {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 2;
}

.tag-item {
	height: 43rpx;
	display: inline-block;
	justify-content: center;
	background-color: rgba(229, 245, 245, .7);
	border-radius: 28rpx;
	margin-right: 19rpx;
	margin-bottom: 7rpx;
}

.tag-item-text {
	font-size: 20rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #029E9D;
	opacity: 1;
	line-height: 43rpx;
	padding-right: 14rpx;
	padding-left: 14rpx;
}

.attestation {
	width: 84rpx;
	height: 35rpx;
	display: inline-block;
	vertical-align: middle;
	margin: -3rpx 14rpx 0 0;
}
.item-title1{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding: 0px 19rpx;
	/*line-height: 0.93rem;*/
	/*height: 0.93rem;*/
	color: #191919;
	font-size: 13px;
	-webkit-line-clamp: 2;
	margin-top: 7rpx;
}
.connaught-style .tabs .item.active {
    color: #019d9d;
}
</style>